<template>
  <div class="c-p c-maxw640">
    <div>
      <div class="masker" @click="closePay"></div>
      <div class="c-bg-white  c-content-scroll c-maxh content" slot="content">
        <div class="c-bd-b1 c-ph24  c-fs28 c-pt28 c-pb20 c-bg-white">
          支付平台
        </div>
        <div v-if="ckFrom == 190" class="c-mh24 c-pv30 c-flex-row c-justify-sb c-fs22 c-bd-b1">
          <img :src="$addXossFilter(giftCardPic, require('@/assets/i/wap/giftCard/gift_card_icon.png'))" class="c-flex-shrink0 c-br10 c-ww160 c-maxh106 c-text-hidden" alt="">
          <div class="c-flex-grow1 c-ml20 c-flex-column c-justify-sb">
            <p class="c-fs24 c-fw600 c-lh34 c-text-ellipsis2">{{totalCoin}}{{giftCardName}}</p>
            <p class="c-fc-sblack"><span class="c-fs20">￥</span>{{totalPrice}}</p>
          </div>
        </div>
        <div class="c-ph24 c-bg-white">
          <div v-if="isCanUseGiftCard && ((isKnowledge && !isiOSApp) || !isKnowledge)" class="c-hh80 c-flex-row c-aligni-center c-bd-b1" @click="clickPayType(2)">
            <img v-if="!!giftCardPic" :src="$addXossFilter(giftCardPic)" :class="Number(totalCoin)== 0 ? 'pic-gray' : ''" class="c-ww40 c-hh40 c-brp50" alt="" />
            <div v-else class="iconfont c-fs40 c-lh" :class="Number(totalCoin) > 0 ? 'c-fc-xsorange' : 'c-fc-gray'">&#xe68e;</div>
            <div class="c-w0 c-flex-grow1 c-fs22 c-lh c-pl20" :class="Number(totalCoin) > 0 ? 'c-fc-xblack' : 'c-fc-gray'">{{ giftCardName }}（剩余{{ coinAmount }}）</div>
            <div class="c-textAlign-r iconfont c-fs32 c-lh" :class="payType == 2 ? 'theme-fc' : 'c-fc-gray'">{{ payType == 2 ? "&#xe6b1;" : "&#xe692;" }}</div>
          </div>
          <div class="c-hh80 c-flex-row c-aligni-center c-bd-b1" v-if="((isKnowledge && !isiOSApp) || !isKnowledge) && enableWxpay" @click="clickPayType(0)">
            <div class="iconfont c-fs40" :class="Number(totalPrice) > 0 ? 'c-fc-green' : 'c-fc-gray'">&#xe61a;</div>
            <div class="c-w0 c-flex-grow1 c-fs22 c-lh c-pl20" :class="Number(totalPrice) > 0 ? 'c-fc-xblack' : 'c-fc-gray'">微信支付</div>
            <div class="c-textAlign-r iconfont c-fs32 c-lh" :class="payType == 0 && Number(totalPrice) > 0 ? 'theme-fc icon-gouxuan1' : 'c-fc-gray icon-gouxuanquan'"></div>
          </div>
          <div class="c-hh80 c-flex-row c-aligni-center c-bd-b1 coms-live-iframe-none" v-if="enableAlipay == 1 && !$isWxApp() && ckFrom != 103 && ckFrom != 104 && ((isKnowledge && !isiOSApp) || !isKnowledge)" @click="clickPayType(3)">
            <div class="iconfont c-fs40" :class="Number(totalPrice) > 0 ? 'c-fc-xblue' : 'c-fc-gray'">&#xe74e;</div>
            <div class="c-w0 c-flex-grow1 c-fs22 c-lh c-pl20" :class="Number(totalPrice) > 0 ? 'c-fc-xblack' : 'c-fc-gray'">支付宝支付</div>
            <div class="c-textAlign-r iconfont c-fs32 c-lh" :class="payType == 3 && Number(totalPrice) > 0 ? 'theme-fc icon-gouxuan1' : 'c-fc-gray icon-gouxuanquan'"></div>
          </div>
          <div class="c-hh80 c-flex-row c-aligni-center" @click="clickPayType(1)" v-if="(!isKnowledge && !isiOSApp) || isKnowledge">
            <div class="iconfont c-fs40 c-lh" :class="balance >= totalPrice && (enablePayMall || Number(totalPrice) == 0) ? 'theme-fc' : 'c-fc-gray'">&#xe602;</div>
            <div class="c-w0 c-flex-grow1 c-fs20 c-lh c-pl20" :class="balance >= totalPrice && (enablePayMall || Number(totalPrice) == 0) ? 'c-fc-xblack' : 'c-fc-gray'">账户余额{{ "￥" | iosPriceFilter }}{{ balance.toFixed(2) }}</div>
            <div class="c-textAlign-r iconfont c-fs32 c-lh" :class="payType == 1 && balance >= totalPrice ? 'theme-fc' : 'c-fc-gray'">{{ payType == 1 ? "&#xe6b1;" : "&#xe692;" }}</div>
          </div>
        </div>
        <p v-if="ckFrom == 190" class="c-pt20 c-lh28 c-fs20 c-fc-gray c-textAlign-c c-bd-t1">*你购买的商品为虚拟内容服务，购买后不支持退换，请确认后支付</p>
        <div class="theme-fc c-fs24 c-text-decoration-underline c-ph24 c-pt16 c-flex-row c-flex-center" v-if="isiOSApp && isKnowledge" @click="goRecharge">前往充值中心</div>
        <div v-if="japanPay" class="c-fs22 c-fc-xmlred c-ph24 c-textAlign-c">提示：因汇率的变化，可能导致实付金额会有小幅度波动</div>
        <div class="c-pt30 c-pb30 c-ph24">
          <div @click="clickPay" class="c-fs24 c-fc-white c-br36 c-lh34 c-pv24 c-textAlign-c c-hh72" :class="Number(payType || 0) >= 0 ? 'theme-bg' : 'c-bg-ccc'" v-if="payType != 2">确认支付{{ "￥" | iosPriceFilter }}{{ totalPrice }}</div>
          <div @click="clickPay" class="c-fs24 c-fc-white c-br36 c-lh34 c-pv24 c-textAlign-c c-hh72" :class="Number(payType || 0) >= 0 ? 'theme-bg' : 'c-bg-ccc'" v-else>{{totalCoin > coinAmount ? `${giftCardName}不足，${$isWxApp() ? '请联系商家' : '立即充值'}` :`确认${$isWxApp() ? '消耗' : '支付'}${totalCoin}${giftCardName}`}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {utilJs} from "@/utils/common.js";
export default {
  name: "PayTemplate",
  components: {
  },
  props: {
    balance: {
      type: Number,
      default: 0,
    },
    totalPrice: {
      type: Number,
      default: 0,
    },
    coinAmount: {
      // 虚拟币总额
      type: Number,
      default: 0,
    },
    enablePayMall: {
      //是否可以用余额支付商城商品
      type: Boolean,
      default: true,
    },
    isCanUseGiftCard: {
      // 是否开启虚拟币支付
      type: Boolean,
      default: false,
    },
    totalCoin: {
      // 虚拟币使用总额
      type: Number,
      default: 0,
    },
    ckFrom: {
      type: Number,
      default: 0,
    },
    enableWxpay: {
      //是否可以微信支付
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      enableAlipay: localStorage.getItem("enableAlipay") || 0,
      payType: -1,
      isiOSApp: navigator.userAgent.indexOf('IOSLogin') > -1 || navigator.userAgent.indexOf('IOSNewLogin') > -1 || navigator.userAgent.indexOf("IOSNewApp") > -1,
      japanPay: false, //是否日本支付
      giftCardName: "",
      giftCardPic: "",
      isKnowledge: false, // 是否是虚拟商品
    };
  },
  mounted() {
    const JAPAN_PAY_COMPANY_LIST = ["vavv2m", "g9xwd8", "8rxm"];
    this.japanPay = JAPAN_PAY_COMPANY_LIST.includes(localStorage.getItem("companyId"));
    // iOS app 虚拟商品只能用余额，实体商品只有余额用不了
    this.isiOSApp = navigator.userAgent.indexOf("IOSLogin") > -1 || navigator.userAgent.indexOf("IOSNewLogin") > -1 || navigator.userAgent.indexOf("IOSNewApp") > -1;
    this.isKnowledge = this.ckFrom == global.ckFrom.shopping || this.ckFrom == global.ckFrom.mall ? false : true;
    this.enableAlipay = localStorage.getItem("enableAlipay") || 0;
    let payType = this.enableWxpay ? 0 : -1;
    //为了ios app的审核
    if (this.isiOSApp && !this.isKnowledge) { // iOS app 并且是实体商品，走微信支付
      payType = 0;
    } else if (this.isiOSApp && this.isKnowledge) { // iOS app 并且是虚拟商品，走余额支付
      payType = 1;
    } else {
      payType = this.getDefaultPayType();
    }
    this.payType = payType;
    utilJs.getGiftCardInfo().then((res) => {
      this.giftCardName = res.name || "虚拟币";
      this.giftCardPic = res.coinImg || "";
    });
  },
  watch: {
    totalPrice: {
      handler: function() {
        if (Number(this.totalPrice) == 0) { // 价格为0，默认切换为余额支付
          this.payType = 1;
        } else if (Number(this.totalPrice) > 0 && ((this.payType == 1 && (Number(this.totalPrice) > Number(this.balance) || !this.enablePayMall)) || this.payType == -1)) { // 价格大于0 && ((余额支付 && (价格大于余额 || 未开启对应余额支付) || 未选中支付方式))，根据优先级选中支付方式
          this.payType = this.getDefaultPayType();
        }
      },
      immediate: true,
    },
  },
  activated() {
  },
  methods: {
    getDefaultPayType() {
      let payType = -1;
      // 小程序不支持支付宝支付
      let enableAlipay = !!(localStorage.getItem("enableAlipay") == 1) && !this.$isWxApp();
      // （虚拟币 > 微信支付 > 支付宝支付 > 余额支付）除了价格为0的情况，余额支付优先，其他的情况都遵循这个优先级
      if (this.totalPrice == 0) {
        payType = 1
      } else if (this.isCanUseGiftCard) {
        payType = 2
      } else if (this.enableWxpay) {
        payType = 0
      } else if (enableAlipay) {
        payType = 3
      } else if (this.enablePayMall && Number(this.balance || 0) > 0 && Number(this.balance || 0) >= Number(this.totalPrice || 0)) {
        payType = 1
      }
      return payType;
    },
    goRecharge() {
      this.$routerGo(this, "replace", {path: "/homePage/course/iosRecharge"});
    },
    clickPayType: function(type) {
      if (Number(this.totalPrice) == 0) { // 价格为0，只能余额
        this.payType = 1;
      } else if (Number(this.totalPrice) > 0) {
        if (type == 1 && Number(this.totalPrice) > Number(this.balance)) { // 价格大于余额，也不能选余额支付
          return;
        }
        if (type == 1 && !this.enablePayMall) { // 没开启余额支付
          return;
        }
        // 其余情况，有开启，就能选
        this.payType = type;
      }
    },
    //点击支付
    clickPay() {
      // 没有选中支付方式
      if (this.payType == -1) {
        return
      }
      this.$emit("clickPayType", this.payType);
    },
    closePay: function() {
      this.$emit("closePay");
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.vux-x-switch.weui-cell_switch {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.content {
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 1003;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.masker {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1002;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
.pic-gray{
  opacity: 0.5;
}
</style>
